<template>
	<div class="app">
		<div>
			<el-form ref="form" label-width="80px">
				<el-form-item label="详细地址"><el-input v-model="address_detail" id="suggestId" placeholder="请输入详细地址"></el-input></el-form-item>
				<el-form-item label="地图定位"><div id="allmap" ref="allmap"></div></el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			address_detail: null, //详细地址
			userlocation: { lng: '', lat: '' }
		};
	},
	methods: {
		// map() {
		// 	let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
		// 	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
		// 	map.addControl(
		// 		new BMap.MapTypeControl({
		// 			//添加地图类型控件
		// 			mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
		// 		})
		// 	);
		// 	map.setCurrentCity('北京'); // 设置地图显示的城市 此项是必须设置的
		// 	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		// }
	},
	mounted() {
		// this.map();
		this.$nextTick(function() {
			var th = this;
			// 创建Map实例
			var map = new BMap.Map('allmap');
			// 初始化地图,设置中心点坐标，
			var point = new BMap.Point(121.160724, 31.173277); // 创建点坐标，汉得公司的经纬度坐标
			map.centerAndZoom(point, 15);
			map.enableScrollWheelZoom();
			var ac = new BMap.Autocomplete({ //建立一个自动完成的对象
				input: 'suggestId',
				location: map
			});
			var myValue;
			ac.addEventListener('onconfirm', function(e) {
				//鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				this.address_detail = myValue;
				setPlace();
			});

			function setPlace() {
				map.clearOverlays(); //清除地图上所有覆盖物
				function myFun() {
					th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					map.centerAndZoom(th.userlocation, 18);
					map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
				}

				var local = new BMap.LocalSearch(map, {
					//智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);

				//测试输出坐标（指的是输入框最后确定地点的经纬度）
				map.addEventListener('click', function(e) {
					//经度
					console.log(th.userlocation.lng);
					//维度
					console.log(th.userlocation.lat);
				});
			}
		});
	}
};
</script>

<style>
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
#allmap {
	height: 500px;
	overflow: hidden;
}
</style>
